<template>
  <div class="home-common-layout public-pages">
    <el-container class="public-pages">
      <el-aside :width="isCollapse ? '0px' : '200px'">
        <LeftMenu :menuList="menuList" />
      </el-aside>
      <el-container>
        <el-header class="headerBox">
          <topHeader />
        </el-header>
        <el-main>
          <transition name="el-fade-in-linear">
            <router-view></router-view>
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { reactive, computed } from "vue";
import { useStore } from "vuex";
// @ is an alias to /src
import LeftMenu from "@/components/layout/leftMenu.vue";
import topHeader from "@/components/layout/topHeader.vue";
//vuex
const store = useStore();
const userInform = computed(() => {
  return store.state.user.userInform;
});
const isCollapse = computed(() => {
  return store.state.setting.isCollapse;
});
setTimeout(() => {
  console.log(store.state.user.userInform);
  console.log("333333333333");
  console.log(userInform.value); //vue3中获取computed的值需要追加.value
}, 20000);
const menuList = reactive([
  {
    id: "1",
    parent_id: "0",
    m_name: "可跳转菜单",
    url: "1",
    icon: "setting",
    childs: [
      {
        id: "11",
        parent_id: "1",
        m_name: "列表页",
        url: "/tableList",
        icon: "Grid",
        childs: [],
      },
      {
        id: "12",
        parent_id: "1",
        m_name: "树形控件",
        url: "/treeList",
        icon: "Location",
        childs: [],
      },
    ],
  },
  {
    id: "2",
    parent_id: "0",
    m_name: "Navigator Two",
    url: "",
    icon: "Menu",
    childs: [
      {
        id: "21",
        parent_id: "2",
        m_name: "item one",
        url: "",
        icon: "Location",
        childs: [
          {
            id: "211",
            parent_id: "21",
            m_name: "one-children",
            url: "",
            icon: "Grid",
            childs: [],
          },
        ],
      },
      {
        id: "22",
        parent_id: "2",
        m_name: "item two",
        url: "",
        icon: "Grid",
        childs: [],
      },
      {
        id: "23",
        parent_id: "2",
        m_name: "item one",
        url: "",
        icon: "Grid",
        childs: [],
      },
      {
        id: "24",
        parent_id: "2",
        m_name: "item two",
        url: "",
        icon: "Document",
        childs: [],
      },
    ],
  },
]);
store.dispatch('setMenuList', { menuList: menuList })
</script>
